﻿<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>轮播效果 &middot; BootstrapVue</title>
<!-- Bootstrap 核心CSS -->
<link href="../../../v4/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../../../v4/assets/css/docsearch.min.css" rel="stylesheet">
<link href="../../../v4/assets/css/docs.min.css" rel="stylesheet">
<link href="../../style/bv_path.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<link data-n-head="ssr" rel="manifest" href="../../manifest.json">
<link data-n-head="ssr" rel="shortcut icon" href="../../style/icons/icon_64.png">
<link data-n-head="ssr" rel="apple-touch-icon" href="../../style/icons/icon_512.png" sizes="512x512">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../">首页</a></li>
      <li class="nav-item"><a class="nav-link" href="index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link active" href="../components">组件</a></li>
      <li class="nav-item"><a class="nav-link " href="../directives">指令</a></li>
      <li class="nav-item"><a class="nav-link " href="../reference">参考</a></li>
      <li class="nav-item"><a class="nav-link " href="https://bootstrap-vue.org/play" target="_blank">体验</a></li>
      <li class="nav-item"><a class="nav-link " href="http://code.z01.com/v4"><i class="zi zi_bold" zico="粗"></i> Boostrap</a></li>
      <li class="nav-item"><a class="nav-link" href="http://ico.z01.com" target="_blank" rel="noopener">zico图标系统</a></li>
      <li class="nav-item"><a class="nav-link" href="http://www.z01.com" target="_blank" rel="noopener">Zoomla!逐浪CMS</a></li>
    </ul>
  </div>
  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
    <li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="alse"> v2.12.0 </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> 
        <a class="dropdown-item active" href="../../../bootstrap-vue/docs/4.0/">Latest (4.3.x)</a>
        <a class="dropdown-item" href="/Boot/">v3.3.7</a>
        <a class="dropdown-item" href="/Sass/">Sass语言</a>
        <a class="dropdown-item" href="/Emmet/">Emmet语法</a>
        <a class="dropdown-item" href="//www.z01.com/tool/" target="_blank">IIS站长工具</a>
        <a class="dropdown-item" href="//ad.z01.com/" target="_blank">广告源码</a>
        <a class="dropdown-item" href="//v.z01.com/mb/" target="_blank">免费模板</a>
        <a class="dropdown-item" href="//v.z01.com/" target="_blank">H5移动创作</a>
        <a class="dropdown-item" href="//www.z01.com/help/web/3234.shtml" target="_blank">Flexbox布局</a>
		<a class="dropdown-item" href="/boot/font.html" target="_blank">Font Awesome</a>
</div>
    </li>
    <li class="nav-item"> <a class="nav-link p-2" href="//zoomla.github.io/bootstrap4-zhcn-documentation" target="_blank" rel="noopener" aria-label="GitHub">
      <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
        <title>GitHub</title>
        <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/>
      </svg>
      </a> </li>
    <li class="nav-item"> <a class="nav-link p-2" href="http://www.z01.com/blog/ren/3214.shtml" target="_blank" rel="noopener" aria-label="Slack">译者说</a></li>
  </ul>
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="download.html">下载 Bootstrap</a> </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      <form class="bd-search d-flex align-items-center">
        <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
        <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false">
          <title>Menu</title>
          <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/>
        </svg>
        </button>
      </form>


<nav class="collapse bd-links" id="bd-docs-nav">
<div class=""><a href="../" class="bd-toc-link">首页</a></div>
<div class="bd-toc-item nuxt-link-exact-active "><a href="../../../bootstrap-vue/docs/" class="bd-toc-link  "> 起步 </a>
<ul class="nav bd-sidenav">
</ul>
</div>
<div class="bd-toc-item active"><a href="../../../bootstrap-vue/docs/components/" class="bd-toc-link nuxt-link-exact-active"> 组件 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/index.html" class="nav-link"> 组件目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/alert.html" class="nav-link"> 警告提示框(Alert) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 徽章(Badge) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 面包屑导航(Breadcrumb) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button.html" class="nav-link"> 按钮(Button) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-group.html" class="nav-link"> 按钮组(Button Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-toolbar.html" class="nav-link"> 按钮Toolbar(Button Toolbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/calendar.html" class="nav-link"> 日历组件(Calendar) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/card.html" class="nav-link"> 卡片(Card) </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/components/carousel.html" class="nav-link"> 轮播效果(Carousel) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/collapse.html" class="nav-link"> 折叠面板(Collapse) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/dropdown.html" class="nav-link"> 下拉菜单(Dropdown) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/embed.html" class="nav-link"> 嵌入(Embed) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form.html" class="nav-link"> 表单(Form) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-checkbox.html" class="nav-link"> 表单复选框(Form Checkbox) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-datepicker.html" class="nav-link"> 表单时间选择器(Form Datepicker) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-file.html" class="nav-link"> 文件选择(Form File) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-group.html" class="nav-link"> 表单组合(Form Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-input.html" class="nav-link"> 表单输入框(Form Input) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-radio.html" class="nav-link"> 单选择表单Form Radio </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-select.html" class="nav-link"> 下拉式表单(Form Select) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-spinbutton.html" class="nav-link"> 按钮式表单(Form Spinbuttno) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-tags.html" class="nav-link"> Tags表单选择器(Form Tags) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-textarea.html" class="nav-link"> 文本框(Form Textarea) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-timepicker.html" class="nav-link"> 表单内时间控件(Form Timepicker) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/image.html" class="nav-link"> 图片(Image) </a></li>

<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/input-group.html" class="nav-link"> 输入框(Input Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/jumbotron.html" class="nav-link"> Hero大块屏(Jumbotron) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/layout.html" class="nav-link"> 布局与网络Layout and Grid System </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/link.html" class="nav-link"> 链接(Link)</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/list-group.html" class="nav-link"> 列表组(List group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/media.html" class="nav-link"> 媒体(Media) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/modal.html" class="nav-link"> 弹出模态框(Modal) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/nav.html" class="nav-link"> 导航(Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/navbar.html" class="nav-link"> 导航栏(Navbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination.html" class="nav-link"> 分页(Pagination) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav.html" class="nav-link"> 分页导航(Pagination Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/popover.html" class="nav-link"> 指示备注(Popover) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/progress.html" class="nav-link"> 进度指示器(Progress) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/spinner.html" class="nav-link"> 旋转指示器(Spinner) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/table.html" class="nav-link"> 表格(Table) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tabs.html" class="nav-link"> 选项卡(Tabs) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/time.html" class="nav-link"> 时间组件(Time) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/toast.html" class="nav-link"> 冒泡推送(Toasts) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tooltip.html" class="nav-link"> tip提示组件(Tooltip) </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/directives/" class="bd-toc-link"> 指令 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/index.html" class="nav-link"> 指令目录 </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/directives/hover.html" class="nav-link"> Hover 指令<small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/popover.html" class="nav-link"> Popover 提示备注</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/scrollspy.html" class="nav-link"> Scrollspy 滚动监听</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/tooltip.html" class="nav-link"> Tooltip 提示指令</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/visible.html" class="nav-link"> Visible 可见性操作<small class="badge text-uppercase badge-success">New</small> </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/icons.html" class="bd-toc-link"> Icons图标</a>
<ul class="nav bd-sidenav">
</ul>
</div>
  
<div class="bd-toc-item"><a class="bd-toc-link" href="../../../bootstrap-vue/docs/reference">参考</a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference" class="nav-link.html"> 参考目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/accessibility.html" class="nav-link">友好访问</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/color-variants.html" class="nav-link">Color颜色变量 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/images.html" class="nav-link"> 组件图像img的src路径解析</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/router-links.html" class="nav-link"> Router路由支持 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/size-props.html" class="nav-link">大小规格</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/spacing-classes.html" class="nav-link">间距处理</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/starter-templates.html" class="nav-link">开始模板</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/theming.html" class="nav-link">主题色彩</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/utility-classes.html" class="nav-link">通用Class类</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/validation.html" class="nav-link">Form表单验证</a></li>
</ul>
</div>
<div class=""><a href="https://bootstrap-vue.org/play" class="bd-toc-link" target="_blank">在线模拟器</a></div>
</nav>
</div>

<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="nav-item toc-entry mb-2"><a target="_self" href="#carousel" class="nav-link font-weight-bold"><span>轮播效果(Carousel)</span></a></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#sizing" class="nav-link"><span>尺寸</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#interval" class="nav-link"><span>间隔</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#pausing-the-carousel" class="nav-link"><span>暂停轮播</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#controls-and-indicators" class="nav-link"><span>控制和指示器</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#carousel-slide-content" class="nav-link"><span>轮播幻灯片内容</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#props" class="nav-link"><span>属性</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#named-slots" class="nav-link"><span>命名插槽</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#carousel-animation" class="nav-link"><span>轮播动画</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#crossfade-animation" class="nav-link"><span>淡入淡出动画</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#disable-animation" class="nav-link"><span>禁用动画</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#slide-wrapping" class="nav-link"><span>循环轮播</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#hide-slide-text-content-on-small-screens" class="nav-link"><span>在小屏幕上隐藏幻灯片文本内容</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#touch-swipe-support" class="nav-link"><span>触摸滑动支持</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#v-model-support" class="nav-link"><span>v-model 支持</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#programmatic-slide-control" class="nav-link"><span>程序化滑动控制</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#accessibility" class="nav-link"><span>辅助功能</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#component-reference" class="nav-link"><span>组件参考</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-carousel" class="nav-link"><span>&lt;b-carousel&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-carousel-slide" class="nav-link"><span>&lt;b-carousel-slide&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-individual-components" class="nav-link"><span>导入单个组件</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-as-a-plugin" class="nav-link"><span>作为Vue.js插件导入</span></a></li>
</ul>
</li>
</ul>
</div>

<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">

<nav data-v-aafc4aea="" aria-label="Breadcrumbs" class="float-left mt-2 mb-0 mb-lg-2">
<ol data-v-aafc4aea="" class="breadcrumb d-inline-flex bg-transparent px-2 py-1 my-0">
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../" class="nuxt-link-active" target="_self">首页</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs" class="nuxt-link-active" target="_self">中文手册</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs/components/" class="nuxt-link-active" target="_self">组件</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item active"><span data-v-aafc4aea="" aria-current="location">轮播效果</span></li>
</ol>
</nav>
<div class="clearfix d-block"></div>
  <h1 class="bd-title" id="content">轮播效果(Carousel)</h1>
  <p class="bd-lead">轮播效果是一种幻灯片显示，用于循环显示使用CSS 3D转换构建的一系列内容，并可以处理一系列图像，文本或自定义标记。 它还包括对上一个/下一个控件和指示器的支持。</p>
  <script type="text/javascript" src="../../../v4/assets/js/pupCMS.js"></script>


<nav class="bd-quick-links mb-3 d-xl-none" data-v-811345e6="">
<header data-v-811345e6="">
<button data-v-811345e6="" type="button" class="btn font-weight-bold btn-outline-secondary btn-sm btn-block collapsed" aria-controls="bd-quick-links-collapse" aria-expanded="false"><span data-v-811345e6="">Show</span> page table of contents </button>
</header>
<ul data-v-811345e6="" id="bd-quick-links-collapse" class="collapse" style="display: none;">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#sizing" class=""><span data-v-811345e6="">Sizing</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#interval" class=""><span data-v-811345e6="">Interval</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#pausing-the-carousel" class=""><span data-v-811345e6="">Pausing the carousel</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#controls-and-indicators" class=""><span data-v-811345e6="">Controls and indicators</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#carousel-slide-content" class=""><span data-v-811345e6="">Carousel slide content</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#props" class=""><span data-v-811345e6="">Props</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#named-slots" class=""><span data-v-811345e6="">Named slots</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#carousel-animation" class=""><span data-v-811345e6="">Carousel animation</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#crossfade-animation" class=""><span data-v-811345e6="">Crossfade animation</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#disable-animation" class=""><span data-v-811345e6="">Disable animation</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#slide-wrapping" class=""><span data-v-811345e6="">Slide wrapping</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#hide-slide-text-content-on-small-screens" class=""><span data-v-811345e6="">Hide slide text content on small screens</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#touch-swipe-support" class=""><span data-v-811345e6="">Touch swipe support</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#v-model-support" class=""><span data-v-811345e6="">v-model support</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#programmatic-slide-control" class=""><span data-v-811345e6="">Programmatic slide control</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#accessibility" class=""><span data-v-811345e6="">Accessibility</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#component-reference" class=""><span data-v-811345e6="">Component reference</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-carousel" class=""><span data-v-811345e6="">&lt;b-carousel&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-carousel-slide" class=""><span data-v-811345e6="">&lt;b-carousel-slide&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-individual-components" class=""><span data-v-811345e6="">Importing individual components</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-as-a-plugin" class=""><span data-v-811345e6="">Importing as a Vue.js plugin</span></a></li>
</ul>
</li>
</ul>
</nav>
<div translate="translate" class="bd-example vue-example vue-example-b-carousel notranslate">
<div>
<div role="region" id="carousel-1" aria-busy="false" class="carousel slide" style="background: rgb(171, 171, 171); text-shadow: rgb(51, 51, 51) 1px 1px 2px;">
<div id="carousel-1___BV_inner_" role="list" class="carousel-inner">
<div role="listitem" class="carousel-item" aria-current="false" aria-posinset="1" aria-setsize="5" id="__BVID__1710" style="background: rgb(171, 171, 171);" aria-hidden="true"><img src="https://picsum.photos/1024/480/?image=52" width="1024" height="480" class="img-fluid w-100 d-block">
<div class="carousel-caption">
<h3>First slide</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div role="listitem" class="carousel-item" aria-current="false" aria-posinset="2" aria-setsize="5" style="background: rgb(171, 171, 171);" id="__BVID__1711" aria-hidden="true"><img src="https://picsum.photos/1024/480/?image=54" width="1024" height="480" class="img-fluid w-100 d-block">
<div class="carousel-caption">
<h1>Hello world!</h1>
</div>
</div>
<div role="listitem" class="carousel-item" aria-current="false" aria-posinset="3" aria-setsize="5" id="__BVID__1712" style="background: rgb(171, 171, 171);" aria-hidden="true"><img src="https://picsum.photos/1024/480/?image=58" width="1024" height="480" class="img-fluid w-100 d-block"></div>
<div role="listitem" class="carousel-item" aria-current="false" aria-posinset="4" aria-setsize="5" id="__BVID__1713" style="background: rgb(171, 171, 171);" aria-hidden="true"><img width="1024" height="480" src="https://picsum.photos/1024/480/?image=55" alt="image slot" class="d-block img-fluid w-100"></div>
<div role="listitem" class="carousel-item active" aria-current="true" aria-posinset="5" aria-setsize="5" id="__BVID__1714" style="background: rgb(171, 171, 171);" aria-hidden="false"><img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%221024%22%20height%3D%22480%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3Atransparent%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E" alt="Blank image" width="1024" height="480" class="img-fluid w-100 d-block">
<div class="carousel-caption">
<h3>Blank Image</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros felis, tincidunt
          a tincidunt eget, convallis vel est. Ut pellentesque ut lacus vel interdum. </p>
</div>
</div>
</div>
<a href="#" role="button" aria-controls="carousel-1___BV_inner_" class="carousel-control-prev"><span aria-hidden="true" class="carousel-control-prev-icon"></span><span class="sr-only">Previous Slide</span></a><a href="#" role="button" aria-controls="carousel-1___BV_inner_" class="carousel-control-next"><span aria-hidden="true" class="carousel-control-next-icon"></span><span class="sr-only">Next Slide</span></a>
<ol id="carousel-1___BV_indicators_" aria-hidden="false" aria-label="Select a slide to display" aria-owns="carousel-1___BV_inner_" class="carousel-indicators">
<li role="button" id="carousel-1___BV_indicator_1_" tabindex="0" aria-current="false" aria-label="Goto Slide 1" aria-controls="carousel-1___BV_inner_" class="" aria-describedby="__BVID__1710"></li>
<li role="button" id="carousel-1___BV_indicator_2_" tabindex="0" aria-current="false" aria-label="Goto Slide 2" aria-controls="carousel-1___BV_inner_" class="" aria-describedby="__BVID__1711"></li>
<li role="button" id="carousel-1___BV_indicator_3_" tabindex="0" aria-current="false" aria-label="Goto Slide 3" aria-controls="carousel-1___BV_inner_" class="" aria-describedby="__BVID__1712"></li>
<li role="button" id="carousel-1___BV_indicator_4_" tabindex="0" aria-current="false" aria-label="Goto Slide 4" aria-controls="carousel-1___BV_inner_" class="" aria-describedby="__BVID__1713"></li>
<li role="button" id="carousel-1___BV_indicator_5_" tabindex="0" aria-current="true" aria-label="Goto Slide 5" aria-controls="carousel-1___BV_inner_" class="active" aria-describedby="__BVID__1714"></li>
</ol>
</div>
<p class="mt-4"> Slide #: 4<br>
Sliding: false </p>
</div>
</div>
<figure class="highlight">
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-carousel</span>
      <span class="hljs-attr">id</span>=<span class="hljs-string">"carousel-1"</span>
      <span class="hljs-attr">v-model</span>=<span class="hljs-string">"slide"</span>
      <span class="hljs-attr">:interval</span>=<span class="hljs-string">"4000"</span>
      <span class="hljs-attr">controls</span>
      <span class="hljs-attr">indicators</span>
      <span class="hljs-attr">background</span>=<span class="hljs-string">"#ababab"</span>
      <span class="hljs-attr">img-width</span>=<span class="hljs-string">"1024"</span>
      <span class="hljs-attr">img-height</span>=<span class="hljs-string">"480"</span>
      <span class="hljs-attr">style</span>=<span class="hljs-string">"text-shadow: 1px 1px 2px #333;"</span>
      @<span class="hljs-attr">sliding-start</span>=<span class="hljs-string">"onSlideStart"</span>
      @<span class="hljs-attr">sliding-end</span>=<span class="hljs-string">"onSlideEnd"</span>
    &gt;</span>
      <span class="hljs-comment">&lt;!-- Text slides with image --&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-carousel-slide</span>
        <span class="hljs-attr">caption</span>=<span class="hljs-string">"First slide"</span>
        <span class="hljs-attr">text</span>=<span class="hljs-string">"Nulla vitae elit libero, a pharetra augue mollis interdum."</span>
        <span class="hljs-attr">img-src</span>=<span class="hljs-string">"https://picsum.photos/1024/480/?image=52"</span>
      &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-carousel-slide</span>&gt;</span>

      <span class="hljs-comment">&lt;!-- Slides with custom text --&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-carousel-slide</span> <span class="hljs-attr">img-src</span>=<span class="hljs-string">"https://picsum.photos/1024/480/?image=54"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Hello world!<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-carousel-slide</span>&gt;</span>

      <span class="hljs-comment">&lt;!-- Slides with image only --&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-carousel-slide</span> <span class="hljs-attr">img-src</span>=<span class="hljs-string">"https://picsum.photos/1024/480/?image=58"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-carousel-slide</span>&gt;</span>

      <span class="hljs-comment">&lt;!-- Slides with img slot --&gt;</span>
      <span class="hljs-comment">&lt;!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment --&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-carousel-slide</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:img</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">img</span>
            <span class="hljs-attr">class</span>=<span class="hljs-string">"d-block img-fluid w-100"</span>
            <span class="hljs-attr">width</span>=<span class="hljs-string">"1024"</span>
            <span class="hljs-attr">height</span>=<span class="hljs-string">"480"</span>
            <span class="hljs-attr">src</span>=<span class="hljs-string">"https://picsum.photos/1024/480/?image=55"</span>
            <span class="hljs-attr">alt</span>=<span class="hljs-string">"image slot"</span>
          &gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-carousel-slide</span>&gt;</span>

      <span class="hljs-comment">&lt;!-- Slide with blank fluid image to maintain slide aspect ratio --&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-carousel-slide</span> <span class="hljs-attr">caption</span>=<span class="hljs-string">"Blank Image"</span> <span class="hljs-attr">img-blank</span> <span class="hljs-attr">img-alt</span>=<span class="hljs-string">"Blank image"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros felis, tincidunt
          a tincidunt eget, convallis vel est. Ut pellentesque ut lacus vel interdum.
        <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-carousel-slide</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-carousel</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-4"</span>&gt;</span>
      Slide #: {{ slide }}<span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span>
      Sliding: {{ sliding }}
    <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">slide</span>: <span class="hljs-number">0</span>,
        <span class="hljs-attr">sliding</span>: <span class="hljs-literal">null</span>
      }
    },
    <span class="hljs-attr">methods</span>: {
      onSlideStart(slide) {
        <span class="hljs-keyword">this</span>.sliding = <span class="hljs-literal">true</span>
      },
      onSlideEnd(slide) {
        <span class="hljs-keyword">this</span>.sliding = <span class="hljs-literal">false</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p>请注意， <strong>不支持</strong> 嵌套轮播。</p>
<h2 id="sizing" class="bv-no-focus-ring"><span class="bd-content-title">尺寸<a class="anchorjs-link" href="#sizing" aria-labelledby="sizing"></a></span></h2>
<p>轮播不会自动标准化幻灯片尺寸。 因此，您可能需要使用其他实用程序或自定义样式来适当调整内容的大小。 在每张幻灯片中使用图像时，请确保它们均具有相同的尺寸（或长宽比）。</p>
<p>在 <code translate="no" class="notranslate text-nowrap">&lt;b-carousel-slide&gt;</code> 上使用 <code translate="no" class="notranslate text-nowrap">img-src</code> 或 <code translate="no" class="notranslate text-nowrap">img-blank</code> 时，可以通过 <code translate="no" class="notranslate text-nowrap">&lt;b-carousel&gt;</code> 上的 <code translate="no" class="notranslate text-nowrap">img-width</code> 和 <code translate="no" class="notranslate text-nowrap">img-height</code> 属性设置图像的宽度和高度，并将这些值自动应用到每个 <code translate="no" class="notranslate text-nowrap">carousel-slide</code> 图像上。</p>
<p>注意，图像仍然是响应的，并自动增长或缩小，以适应其父容器的宽度。</p>
<p>在内部，<code translate="no" class="notranslate text-nowrap">&lt;b-carousel-slide&gt;</code> 使用 <a href="../../../bootstrap-vue/docs/components/image" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-img&gt;</code></a> 组件渲染图像。<code translate="no" class="notranslate text-nowrap">img-*</code> 属性映射到 <code translate="no" class="notranslate text-nowrap">&lt;b-img&gt;</code> 可用的相应属性。</p>
<h2 id="interval" class="bv-no-focus-ring"><span class="bd-content-title">间隔<a class="anchorjs-link" href="#interval" aria-labelledby="interval"></a></span></h2>
<p>轮播默认间隔为 <code translate="no" class="notranslate text-nowrap">5000</code> 毫秒（5秒）。您可以通过将 <code translate="no" class="notranslate text-nowrap">interval</code> 属性设置为所需的毫秒数来更改幻灯片之间的间隔。 支持的最小滑动间隔为1000毫秒（1秒）。</p>
<p>在支持 <a href="https://www.w3.org/TR/page-visibility/" target="_blank" rel="noopener">Page Visibility API</a> 的浏览器中，当用户看不见网页时，轮播会避免滑动（例如，当浏览器选项卡处于非活动状态，浏览器窗口最小化等）。 当浏览器选项卡处于活动状态时，将恢复滑动。</p>
<h3 id="pausing-the-carousel" class="bv-no-focus-ring"><span class="bd-content-title">暂停轮播<a class="anchorjs-link" href="#pausing-the-carousel" aria-labelledby="pausing-the-carousel"></a></span></h3>
<p>要从自动滑动中暂停轮播，请将 <code translate="no" class="notranslate text-nowrap">interval</code> 属性设置为 <code translate="no" class="notranslate text-nowrap">0</code> 。要重新启动已暂停的轮播，请将 <code translate="no" class="notranslate text-nowrap">interval</code> 重新设置为所需的毫秒数。</p>
<p>当轮播暂停时，用户仍然可以通过控件（如果已启用）或触摸滑动（如果未禁用，则在已启用触摸的设备上）切换幻灯片。</p>
<p>当用户的鼠标悬停在转盘上时，它将自动暂停，并且当鼠标离开转盘时将自动重新启动。 要禁用此功能，请设置 <code translate="no" class="notranslate text-nowrap">no-hover-pause</code> 属性
<b-carousel>。</b-carousel>
</p>
<h2 id="controls-and-indicators" class="bv-no-focus-ring"><span class="bd-content-title">控制和指示器<a class="anchorjs-link" href="#controls-and-indicators" aria-labelledby="controls-and-indicators"></a></span></h2>
<p>设置属性 <code translate="no" class="notranslate text-nowrap">controls</code> 以启用前一个和后一个控件按钮。</p>
<p>设置属性 <code translate="no" class="notranslate text-nowrap">indicators</code> 以显示滑动指示器按钮。</p>
<p>指示器和控件都可以同时设置或独立设置。</p>
<h2 id="carousel-slide-content" class="bv-no-focus-ring"><span class="bd-content-title">轮播幻灯片内容<a class="anchorjs-link" href="#carousel-slide-content" aria-labelledby="carousel-slide-content"></a></span></h2>
<p><code translate="no" class="notranslate text-nowrap">b-carousel-slide</code> 提供了多个属性和插槽，用于将内容放置在幻灯片中。</p>
<h3 id="props" class="bv-no-focus-ring"><span class="bd-content-title">属性<a class="anchorjs-link" href="#props" aria-labelledby="props"></a></span></h3>
<ul>
<li><code translate="no" class="notranslate text-nowrap">caption</code>： 用作幻灯片上主要标题的文本（放置在具有 <code translate="no" class="notranslate text-nowrap">carousel-caption</code> 类的内部元素内）</li>
<li><code translate="no" class="notranslate text-nowrap">text</code>： 标题下的文本（放置在具有 <code translate="no" class="notranslate text-nowrap">carousel-caption</code> 类的内部元素内）</li>
<li><code translate="no" class="notranslate text-nowrap">img-src</code>： 要放在幻灯片背景中的图像的URL</li>
<li><code translate="no" class="notranslate text-nowrap">caption-html</code>：  <code translate="no" class="notranslate text-nowrap">caption</code> 属性的 Alternate 属性，它支持HTML字符串</li>
<li><code translate="no" class="notranslate text-nowrap">html</code>：  <code translate="no" class="notranslate text-nowrap">text</code> 属性的 Alternate 属性，它支持HTML字符串</li>
</ul>
<p class="alert alert-danger"> <strong>警告：</strong> 请谨慎使用 <code class="notranslate" translate="no">caption-html</code> 和 <code class="notranslate" translate="no">html</code> 道具显示用户提供的内容，因为如果不先 <a class="alert-link" href="https://en.wikipedia.org/wiki/HTML_sanitization">清理</a> 用户提供的字符串，它可能会使您的应用程序容易受到 <a class="alert-link" href="https://en.wikipedia.org/wiki/Cross-site_scripting"> <abbr title="Cross Site Scripting Attacks">XSS 攻击</abbr></a> 。</p>
<h3 id="named-slots" class="bv-no-focus-ring"><span class="bd-content-title">命名插槽<a class="anchorjs-link" href="#named-slots" aria-labelledby="named-slots"></a></span></h3>
<ul>
<li><code translate="no" class="notranslate text-nowrap">default</code> 将放置在具有 <code translate="no" class="notranslate text-nowrap">carousel-caption</code> 类的内部元素内部的内容。 出现在 <code translate="no" class="notranslate text-nowrap">caption</code> 和 <code translate="no" class="notranslate text-nowrap">text</code> 属性的任何内容之后。</li>
<li><code translate="no" class="notranslate text-nowrap">img</code> 放置在幻灯片背景中的内容。 尽管有插槽的名称，但您几乎可以将任何内容放置在该插槽中，而不必使用 <code translate="no" class="notranslate text-nowrap">default</code>（默认）的插槽 <code translate="no" class="notranslate text-nowrap">caption</code> 和 <code translate="no" class="notranslate text-nowrap">text</code> 属性。</li>
</ul>
<h2 id="carousel-animation" class="bv-no-focus-ring"><span class="bd-content-title">轮播动画<a class="anchorjs-link" href="#carousel-animation" aria-labelledby="carousel-animation"></a></span></h2>
<p>默认情况下，轮播使用滑动动画。 您可以将幻灯片动画更改为淡入淡出动画，也可以完全禁用动画。</p>
<h3 id="crossfade-animation" class="bv-no-focus-ring"><span class="bd-content-title">淡入淡出动画<a class="anchorjs-link" href="#crossfade-animation" aria-labelledby="crossfade-animation"></a></span></h3>
<p>将 <code translate="no" class="notranslate text-nowrap">&lt;b-carousel&gt;</code> <code translate="no" class="notranslate text-nowrap">fade</code> 属性设置为 <code translate="no" class="notranslate text-nowrap">true</code> ，可以使用淡入淡出过渡而不是默认幻灯片动画来对幻灯片进行动画处理。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-carousel-fade notranslate">
<div>
<div role="region" id="carousel-fade" aria-busy="false" class="carousel slide carousel-fade" style="text-shadow: rgb(0, 0, 0) 0px 0px 2px;">
<div id="carousel-fade___BV_inner_" role="list" class="carousel-inner">
<div role="listitem" class="carousel-item" aria-current="false" aria-posinset="1" aria-setsize="3" id="__BVID__1717" aria-hidden="true"><img src="https://picsum.photos/1024/480/?image=10" width="1024" height="480" class="img-fluid w-100 d-block">
<div class="carousel-caption">
<h3>First slide</h3>
</div>
</div>
<div role="listitem" class="carousel-item active" aria-current="true" aria-posinset="2" aria-setsize="3" id="__BVID__1718" aria-hidden="false"><img src="https://picsum.photos/1024/480/?image=12" width="1024" height="480" class="img-fluid w-100 d-block">
<div class="carousel-caption">
<h3>Second Slide</h3>
</div>
</div>
<div role="listitem" class="carousel-item" aria-current="false" aria-posinset="3" aria-setsize="3" id="__BVID__1719" aria-hidden="true"><img src="https://picsum.photos/1024/480/?image=22" width="1024" height="480" class="img-fluid w-100 d-block">
<div class="carousel-caption">
<h3>Third Slide</h3>
</div>
</div>
</div>
<ol id="carousel-fade___BV_indicators_" aria-hidden="false" aria-label="Select a slide to display" aria-owns="carousel-fade___BV_inner_" class="carousel-indicators">
<li role="button" id="carousel-fade___BV_indicator_1_" tabindex="0" aria-current="false" aria-label="Goto Slide 1" aria-controls="carousel-fade___BV_inner_" class="" aria-describedby="__BVID__1717"></li>
<li role="button" id="carousel-fade___BV_indicator_2_" tabindex="0" aria-current="true" aria-label="Goto Slide 2" aria-controls="carousel-fade___BV_inner_" class="active" aria-describedby="__BVID__1718"></li>
<li role="button" id="carousel-fade___BV_indicator_3_" tabindex="0" aria-current="false" aria-label="Goto Slide 3" aria-controls="carousel-fade___BV_inner_" class="" aria-describedby="__BVID__1719"></li>
</ol>
</div>
</div>
</div>
<figure class="highlight">
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-carousel</span>
    <span class="hljs-attr">id</span>=<span class="hljs-string">"carousel-fade"</span>
    <span class="hljs-attr">style</span>=<span class="hljs-string">"text-shadow: 0px 0px 2px #000"</span>
    <span class="hljs-attr">fade</span>
    <span class="hljs-attr">indicators</span>
    <span class="hljs-attr">img-width</span>=<span class="hljs-string">"1024"</span>
    <span class="hljs-attr">img-height</span>=<span class="hljs-string">"480"</span>
  &gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-carousel-slide</span>
      <span class="hljs-attr">caption</span>=<span class="hljs-string">"First slide"</span>
      <span class="hljs-attr">img-src</span>=<span class="hljs-string">"https://picsum.photos/1024/480/?image=10"</span>
    &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-carousel-slide</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-carousel-slide</span>
      <span class="hljs-attr">caption</span>=<span class="hljs-string">"Second Slide"</span>
      <span class="hljs-attr">img-src</span>=<span class="hljs-string">"https://picsum.photos/1024/480/?image=12"</span>
    &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-carousel-slide</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-carousel-slide</span>
      <span class="hljs-attr">caption</span>=<span class="hljs-string">"Third Slide"</span>
      <span class="hljs-attr">img-src</span>=<span class="hljs-string">"https://picsum.photos/1024/480/?image=22"</span>
    &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-carousel-slide</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-carousel</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h3 id="disable-animation" class="bv-no-focus-ring"><span class="bd-content-title">禁用动画<a class="anchorjs-link" href="#disable-animation" aria-labelledby="disable-animation"></a></span></h3>
<p>将 <code translate="no" class="notranslate text-nowrap">&lt;b-carousel&gt;</code> <code translate="no" class="notranslate text-nowrap">no-animation</code> 属性设置为 <code translate="no" class="notranslate text-nowrap">true</code> 以禁用幻灯片动画。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-carousel-no-animation notranslate">
<div>
<div role="region" id="carousel-no-animation" aria-busy="false" class="carousel" style="text-shadow: rgb(0, 0, 0) 0px 0px 2px;">
<div id="carousel-no-animation___BV_inner_" role="list" class="carousel-inner">
<div role="listitem" class="carousel-item active" aria-current="true" aria-posinset="1" aria-setsize="4" id="__BVID__1722"><img src="https://picsum.photos/1024/480/?image=10" width="1024" height="480" class="img-fluid w-100 d-block">
<div class="carousel-caption">
<h3>First slide</h3>
</div>
</div>
<div role="listitem" class="carousel-item" aria-current="false" aria-posinset="2" aria-setsize="4" id="__BVID__1723"><img src="https://picsum.photos/1024/480/?image=12" width="1024" height="480" class="img-fluid w-100 d-block">
<div class="carousel-caption">
<h3>Second Slide</h3>
</div>
</div>
<div role="listitem" class="carousel-item" aria-current="false" aria-posinset="3" aria-setsize="4" id="__BVID__1724"><img src="https://picsum.photos/1024/480/?image=22" width="1024" height="480" class="img-fluid w-100 d-block">
<div class="carousel-caption">
<h3>Third Slide</h3>
</div>
</div>
<div role="listitem" class="carousel-item" aria-current="false" aria-posinset="4" aria-setsize="4" id="__BVID__1725"><img src="https://picsum.photos/1024/480/?image=23" width="1024" height="480" class="img-fluid w-100 d-block">
<div class="carousel-caption">
<h3>Fourth Slide</h3>
</div>
</div>
</div>
<ol id="carousel-no-animation___BV_indicators_" aria-hidden="false" aria-label="Select a slide to display" aria-owns="carousel-no-animation___BV_inner_" class="carousel-indicators">
<li role="button" id="carousel-no-animation___BV_indicator_1_" tabindex="0" aria-current="true" aria-label="Goto Slide 1" aria-controls="carousel-no-animation___BV_inner_" class="active" aria-describedby="__BVID__1722"></li>
<li role="button" id="carousel-no-animation___BV_indicator_2_" tabindex="0" aria-current="false" aria-label="Goto Slide 2" aria-controls="carousel-no-animation___BV_inner_" class="" aria-describedby="__BVID__1723"></li>
<li role="button" id="carousel-no-animation___BV_indicator_3_" tabindex="0" aria-current="false" aria-label="Goto Slide 3" aria-controls="carousel-no-animation___BV_inner_" class="" aria-describedby="__BVID__1724"></li>
<li role="button" id="carousel-no-animation___BV_indicator_4_" tabindex="0" aria-current="false" aria-label="Goto Slide 4" aria-controls="carousel-no-animation___BV_inner_" class="" aria-describedby="__BVID__1725"></li>
</ol>
</div>
</div>
</div>
<figure class="highlight">
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-carousel</span>
    <span class="hljs-attr">id</span>=<span class="hljs-string">"carousel-no-animation"</span>
    <span class="hljs-attr">style</span>=<span class="hljs-string">"text-shadow: 0px 0px 2px #000"</span>
    <span class="hljs-attr">no-animation</span>
    <span class="hljs-attr">indicators</span>
    <span class="hljs-attr">img-width</span>=<span class="hljs-string">"1024"</span>
    <span class="hljs-attr">img-height</span>=<span class="hljs-string">"480"</span>
  &gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-carousel-slide</span>
      <span class="hljs-attr">caption</span>=<span class="hljs-string">"First slide"</span>
      <span class="hljs-attr">img-src</span>=<span class="hljs-string">"https://picsum.photos/1024/480/?image=10"</span>
    &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-carousel-slide</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-carousel-slide</span>
      <span class="hljs-attr">caption</span>=<span class="hljs-string">"Second Slide"</span>
      <span class="hljs-attr">img-src</span>=<span class="hljs-string">"https://picsum.photos/1024/480/?image=12"</span>
    &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-carousel-slide</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-carousel-slide</span>
      <span class="hljs-attr">caption</span>=<span class="hljs-string">"Third Slide"</span>
      <span class="hljs-attr">img-src</span>=<span class="hljs-string">"https://picsum.photos/1024/480/?image=22"</span>
    &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-carousel-slide</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-carousel-slide</span>
      <span class="hljs-attr">caption</span>=<span class="hljs-string">"Fourth Slide"</span>
      <span class="hljs-attr">img-src</span>=<span class="hljs-string">"https://picsum.photos/1024/480/?image=23"</span>
    &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-carousel-slide</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-carousel</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h2 id="slide-wrapping" class="bv-no-focus-ring"><span class="bd-content-title">循环轮播<a class="anchorjs-link" href="#slide-wrapping" aria-labelledby="slide-wrapping"></a></span></h2>
<p>通常，当转盘到达幻灯片列表中的一端或另一端时，它将绕到幻灯片列表的另一端并继续循环。</p>
<p>要禁用循环轮播，请将 <code translate="no" class="notranslate text-nowrap">no-wrap</code> 属性设置为 true。</p>
<h2 id="hide-slide-text-content-on-small-screens" class="bv-no-focus-ring"><span class="bd-content-title">在小屏幕上隐藏幻灯片文本内容<a class="anchorjs-link" href="#hide-slide-text-content-on-small-screens" aria-labelledby="hide-slide-text-content-on-small-screens"></a></span></h2>
<p>在较小的屏幕上，您可能需要隐藏标题和标题。您可以通过 <code translate="no" class="notranslate text-nowrap">&lt;b-carousel-slide&gt;</code> 的 <code translate="no" class="notranslate text-nowrap">content-visible-up</code> 属性。该属性接受断点名称（即<code translate="no" class="notranslate text-nowrap">sm</code>，<code translate="no" class="notranslate text-nowrap">md</code>，<code translate="no" class="notranslate text-nowrap">lg</code>，<code translate="no" class="notranslate text-nowrap">xl</code> 或自定义断点名称（如果已定义）），并将在 <em>较小</em> 断点的屏幕上隐藏标题和标题。</p>
<h2 id="touch-swipe-support" class="bv-no-focus-ring"><span class="bd-content-title">触摸滑动支持<a class="anchorjs-link" href="#touch-swipe-support" aria-labelledby="touch-swipe-support"></a></span></h2>
<p>在支持触摸的设备上，用户可以通过在轮播上向左或向右滑动来切换幻灯片。 要禁用触摸控制，请将 <code translate="no" class="notranslate text-nowrap">no-touch</code> 属性设置为 <code translate="no" class="notranslate text-nowrap">true</code> 。</p>
<h2 id="v-model-support" class="bv-no-focus-ring"><span class="bd-content-title"><code translate="no" class="notranslate text-nowrap">v-model</code> 支持<a class="anchorjs-link" href="#v-model-support" aria-labelledby="v-model-support"></a></span></h2>
<p>以编程方式控制通过 <code translate="no" class="notranslate text-nowrap">v-model</code>（绑定到 <code translate="no" class="notranslate text-nowrap">value</code> 属性）。显示哪张幻灯片。注意，幻灯片是从 <code translate="no" class="notranslate text-nowrap">0</code> 开始索引的。</p>
<h2 id="programmatic-slide-control" class="bv-no-focus-ring"><span class="bd-content-title">程序化滑动控制<a class="anchorjs-link" href="#programmatic-slide-control" aria-labelledby="programmatic-slide-control"></a></span></h2>
<p><code translate="no" class="notranslate text-nowrap">&lt;b-carousel&gt;</code> 实例提供了几种控制滑动的公共方法：</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>方法</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">setSlide(index)</code></td>
<td>转到按 <code translate="no" class="notranslate text-nowrap">index</code> 指定的幻灯片</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">next()</code></td>
<td>转到下一张幻灯片</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">prev()</code></td>
<td>转到上一张幻灯片</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">pause()</code></td>
<td>暂停幻灯片循环</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">start()</code></td>
<td>开始幻灯片循环（ <code translate="no" class="notranslate text-nowrap">interval</code> 属性必须有一个值）</td>
</tr>
</tbody>
</table>
</div>
<p>你需要一个对 carousel 实例的引用（通过 <code translate="no" class="notranslate text-nowrap">this.$refs</code>）来调用这些方法：</p>
<figure class="highlight">
<pre class="hljs html text-monospace p-2 notranslate" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-carousel</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"myCarousel"</span> <span class="hljs-attr">....</span> &gt;</span>
    <span class="hljs-comment">&lt;!-- slides go here --&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-carousel</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    <span class="hljs-comment">// ...</span>
    <span class="hljs-attr">methods</span>: {
      prev() {
        <span class="hljs-keyword">this</span>.$refs.myCarousel.prev()
      },
      next() {
        <span class="hljs-keyword">this</span>.$refs.myCarousel.next()
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h2 id="accessibility" class="bv-no-focus-ring"><span class="bd-content-title">辅助功能<a class="anchorjs-link" href="#accessibility" aria-labelledby="accessibility"></a></span></h2>
<p>轮播通常不完全符合无障碍标准，尽管我们试图使它们尽可能无障碍。</p>
<p>通过 <code translate="no" class="notranslate text-nowrap">id</code> 属性提供文档唯一值，<code translate="no" class="notranslate text-nowrap">&lt;b-carousel&gt;</code> 将启用辅助功能。强烈建议始终向所有组件添加ID。</p>
<p>所有轮播控件和指示器均带有 aria 标签。 这些可以通过设置各种 <code translate="no" class="notranslate text-nowrap">label-*</code> 属性进行定制。</p>
<!-- Component reference added automatically from component package.json -->

<h2 id="component-reference" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title">组件参考<a href="../../../bootstrap-vue/docs/components/carousel#component-reference" class="anchorjs-link" aria-labelledby="component-reference" target="_self"></a></span></h2>
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-carousel" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-carousel&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/carousel#comp-ref-b-carousel" class="anchorjs-link" aria-labelledby="comp-ref-b-carousel" target="_self"></a></span></h3>
</div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/carousel/carousel.js" class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-carousel-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-carousel&gt;</code> 属性 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-carousel-v-model"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-carousel&gt;</code> v-model </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-carousel-events"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-carousel&gt;</code> 事件 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-carousel-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/carousel#comp-ref-b-carousel-props" class="anchorjs-link" aria-labelledby="comp-ref-b-carousel-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__1601">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="b-table-sort-icon-left">属性<span class="sr-only"> (Click to sort Ascending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="id" class="" id="__BVID__1601__row_id">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">id</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">用于在呈现的内容上设置“id”属性，并用作根据需要生成任何其他元素ID的基础</td>
</tr>
<tr role="row" data-pk="label-prev" class="" id="__BVID__1601__row_label-prev">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-prev</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Previous Slide'</code></td>
<td aria-colindex="4" role="cell" class="">设置上一个幻灯片控件的“ aria-label”值</td>
</tr>
<tr role="row" data-pk="label-next" class="" id="__BVID__1601__row_label-next">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-next</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Next Slide'</code></td>
<td aria-colindex="4" role="cell" class="">设置上一个幻灯片控件的“aria-label”值</td>
</tr>
<tr role="row" data-pk="label-goto-slide" class="" id="__BVID__1601__row_label-goto-slide">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-goto-slide</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Goto Slide'</code></td>
<td aria-colindex="4" role="cell" class="">设置滑动指示器控件上“ aria-label”的前缀。 将在幻灯片编号后缀（索引号为1）</td>
</tr>
<tr role="row" data-pk="label-indicators" class="" id="__BVID__1601__row_label-indicators">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-indicators</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Select a slide to display'</code></td>
<td aria-colindex="4" role="cell" class="">在指标控件包装上设置“aria-label”</td>
</tr>
<tr role="row" data-pk="interval" class="" id="__BVID__1601__row_interval">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">interval</code></td>
<td aria-colindex="2" role="cell" class="">Number</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">5000</code></td>
<td aria-colindex="4" role="cell" class="">设置幻灯片之间的延迟时间（以毫秒为单位）</td>
</tr>
<tr role="row" data-pk="indicators" class="" id="__BVID__1601__row_indicators">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">indicators</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">启用指示器按钮以跳到特定幻灯片</td>
</tr>
<tr role="row" data-pk="controls" class="" id="__BVID__1601__row_controls">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">controls</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">启用上一个和下一个控件</td>
</tr>
<tr role="row" data-pk="no-animation" class="" id="__BVID__1601__row_no-animation">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-animation</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置时，在幻灯片之间切换时禁用动画</td>
</tr>
<tr role="row" data-pk="fade" class="" id="__BVID__1601__row_fade">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">fade</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，将幻灯片动画更改为淡入淡出而不是滑动效果</td>
</tr>
<tr role="row" data-pk="no-wrap" class="" id="__BVID__1601__row_no-wrap">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-wrap</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.0.0+</span></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">到达终点时请勿重新开始幻灯片放映</td>
</tr>
<tr role="row" data-pk="no-touch" class="" id="__BVID__1601__row_no-touch">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-touch</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">禁止通过触摸滑动来控制幻灯片</td>
</tr>
<tr role="row" data-pk="no-hover-pause" class="" id="__BVID__1601__row_no-hover-pause">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-hover-pause</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，当悬停当前幻灯片时，将禁用幻灯片放映</td>
</tr>
<tr role="row" data-pk="img-width" class="" id="__BVID__1601__row_img-width">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">img-width</code></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">为所有 b-tab 子项设置默认图像的 'width' 属性</td>
</tr>
<tr role="row" data-pk="img-height" class="" id="__BVID__1601__row_img-height">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">img-height</code></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">为所有 b-tab 子项设置默认图像的 'height' 属性</td>
</tr>
<tr role="row" data-pk="background" class="" id="__BVID__1601__row_background">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">background</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">设置轮播背景的CSS颜色</td>
</tr>
<tr role="row" data-pk="value" class="" id="__BVID__1601__row_value">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">value</code> <span data-v-866a22e8="" class="badge badge-primary">v-model</span></td>
<td aria-colindex="2" role="cell" class="">Number</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">0</code></td>
<td aria-colindex="4" role="cell" class="">当前活动的幻灯片（索引值为0）</td>
</tr>
</tbody>
</table>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-carousel-v-model" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> v-model <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/carousel#comp-ref-b-carousel-v-model" class="anchorjs-link" aria-labelledby="comp-ref-b-carousel-v-model" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped" id="__BVID__1628">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">事件</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">value</code></td>
<td aria-colindex="2" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">input</code></td>
</tr>
</tbody>
</table>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-carousel-events" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 事件 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/carousel#comp-ref-b-carousel-events" class="anchorjs-link" aria-labelledby="comp-ref-b-carousel-events" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__1637">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">事件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">参数</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="sliding-start" class="" id="__BVID__1637__row_sliding-start">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">sliding-start</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">slide</code> - <span data-v-866a22e8="">正在滑到的幻灯片编号。</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">开始过渡到新幻灯片时发出。</td>
</tr>
<tr role="row" data-pk="sliding-end" class="" id="__BVID__1637__row_sliding-end">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">sliding-end</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">slide</code> - <span data-v-866a22e8="">滑到的幻灯片编号。</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">过渡到新幻灯片时结束时发出。</td>
</tr>
</tbody>
</table>
</div>
</article>
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-carousel-slide" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-carousel-slide&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/carousel#comp-ref-b-carousel-slide" class="anchorjs-link" aria-labelledby="comp-ref-b-carousel-slide" target="_self"></a></span></h3>
</div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/carousel/carousel-slide.js" class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-carousel-slide-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-carousel-slide&gt;</code> 属性 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-carousel-slide-slots"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-carousel-slide&gt;</code> 插槽 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-carousel-slide-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/carousel#comp-ref-b-carousel-slide-props" class="anchorjs-link" aria-labelledby="comp-ref-b-carousel-slide-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__1652">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="b-table-sort-icon-left">属性<span class="sr-only"> (Click to sort Ascending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="id" class="" id="__BVID__1652__row_id">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">id</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">用于在呈现的内容上设置“ id”属性，并用作根据需要生成任何其他元素ID的基础</td>
</tr>
<tr role="row" data-pk="img-src" class="" id="__BVID__1652__row_img-src">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">img-src</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">设置图像的URL</td>
</tr>
<tr role="row" data-pk="img-alt" class="" id="__BVID__1652__row_img-alt">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">img-alt</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">设置图像上“alt”属性的值</td>
</tr>
<tr role="row" data-pk="img-width" class="" id="__BVID__1652__row_img-width">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">img-width</code></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">为所有b-tab子项设置默认图像的 “width” 属性</td>
</tr>
<tr role="row" data-pk="img-height" class="" id="__BVID__1652__row_img-height">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">img-height</code></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">为所有b-tab子项设置默认图像的 “height” 属性</td>
</tr>
<tr role="row" data-pk="img-blank" class="" id="__BVID__1652__row_img-blank">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">img-blank</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">如果设置，将呈现空白图像，而不是img-src</td>
</tr>
<tr role="row" data-pk="img-blank-color" class="" id="__BVID__1652__row_img-blank-color">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">img-blank-color</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'transparent'</code></td>
<td aria-colindex="4" role="cell" class="">设置CSS颜色以用作空白图像的填充</td>
</tr>
<tr role="row" data-pk="content-visible-up" class="" id="__BVID__1652__row_content-visible-up">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">content-visible-up</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">指定将开始显示文本内容的断点。 保留默认值以始终显示文本内容</td>
</tr>
<tr role="row" data-pk="content-tag" class="" id="__BVID__1652__row_content-tag">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">content-tag</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'div'</code></td>
<td aria-colindex="4" role="cell" class="">指定要渲染的HTML标签，而不是内容包装的默认标签</td>
</tr>
<tr role="row" data-pk="caption" class="" id="__BVID__1652__row_caption">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">caption</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">放置在标题中的文本内容</td>
</tr>
<tr role="row" data-pk="caption-html" class="" id="__BVID__1652__row_caption-html">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">caption-html</code> <span data-v-866a22e8="" class="badge badge-warning">Use with caution</span></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">HTML字符串内容放置在标题中。 谨慎使用</td>
</tr>
<tr role="row" data-pk="caption-tag" class="" id="__BVID__1652__row_caption-tag">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">caption-tag</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'h3'</code></td>
<td aria-colindex="4" role="cell" class="">指定要渲染的HTML标签，而不是字幕包装程序的默认标签</td>
</tr>
<tr role="row" data-pk="text" class="" id="__BVID__1652__row_text">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">text</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">文本内容放置在幻灯片的文本中</td>
</tr>
<tr role="row" data-pk="text-html" class="" id="__BVID__1652__row_text-html">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">text-html</code> <span data-v-866a22e8="" class="badge badge-warning">Use with caution</span></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">HTML字符串内容放置在幻灯片的文本中。 谨慎使用</td>
</tr>
<tr role="row" data-pk="text-tag" class="" id="__BVID__1652__row_text-tag">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">text-tag</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'p'</code></td>
<td aria-colindex="4" role="cell" class="">指定要渲染的HTML标签，而不是文本内容的默认标签</td>
</tr>
<tr role="row" data-pk="background" class="" id="__BVID__1652__row_background">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">background</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">用作幻灯片背景颜色的CSS颜色</td>
</tr>
</tbody>
</table>
</div>
<div data-v-866a22e8="" class="alert alert-warning">
<p data-v-866a22e8="" class="mb-0 small"><strong data-v-866a22e8="">注意：</strong> 当传递原始用户提供的值时，支持HTML字符串（<code data-v-866a22e8="" translate="translate" class="notranslate">*-html</code>）的道具可能容易受到 <a data-v-866a22e8="" rel="noopener" target="_blank" href="https://en.wikipedia.org/wiki/Cross-site_scripting" class="alert-link"> 跨站点脚本（XSS）攻击 </a> 。您必须先对用户输入进行正确的 <a data-v-866a22e8="" rel="noopener" target="_blank" href="https://en.wikipedia.org/wiki/HTML_sanitization" class="alert-link"> 清理 </a>！ </p>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-carousel-slide-slots" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 插槽 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/carousel#comp-ref-b-carousel-slide-slots" class="anchorjs-link" aria-labelledby="comp-ref-b-carousel-slide-slots" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped" id="__BVID__1680">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">插槽名称</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="img" class="" id="__BVID__1680__row_img">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">img</code></td>
<td aria-colindex="2" role="cell" class="">img元素或图像组件的插槽</td>
</tr>
</tbody>
</table>
</div>
</article>
<article class="bd-content">
<h3 id="importing-individual-components" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入单个组件 <a href="../../../bootstrap-vue/docs/components/carousel#importing-individual-components" class="anchorjs-link" aria-labelledby="importing-individual-components" target="_self"></a></span></h3>
<p> 您可以通过以下指定的导出将各个组件导入到您的项目中：</p>
<div class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__1690">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">组件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">命名输出</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-carousel&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BCarousel</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-carousel-slide&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BCarouselSlide</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p><strong>示例：</strong></p>
<figure class="highlight">
<pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { BCarousel } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.component(<span class="hljs-string">'b-carousel'</span>, BCarousel)</pre></figure>
</article>
<article class="bd-content">
<h3 id="importing-as-a-plugin" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 作为Vue.js插件导入 <a href="../../../bootstrap-vue/docs/components/carousel#importing-as-a-plugin" class="anchorjs-link" aria-labelledby="importing-as-a-plugin" target="_self"></a></span></h3>
<p> 这个插件包含了上面列出的所有组件。插件还包括任何组件别名。 </p>
<div class="table-responsive-sm">
<table fileds="namedExport,importPath" role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped b-table-caption-top" id="__BVID__1701">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">命名输出</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">CarouselPlugin</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p><strong>示例：</strong></p>
<figure class="highlight">
<pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { CarouselPlugin } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.use(CarouselPlugin)</pre></figure>
</article>


















</main>
</div>
</div>


<script src="../../../v4/assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../../v4/dist/js/popper.min.js"></script> 
<script src="../../../v4/dist/js/bootstrap.min.js"></script> 
<script src="../../../v4/assets/js/docs.min.js"></script> 
<script src="../../../v4/assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../../../v4/assets/js/docsearch.min.js"></script> 
<script>
  docsearch({
    appId: 'PRR89ISST8',
    apiKey: '95044d57d4d7bb744f322d1f18ed607f',
    indexName: 'z01-bootstrapV4',
    inputSelector: '#search-input',
    handleSelected: function (input, event, suggestion) {
      var url = suggestion.url;
      url = suggestion.isLvl1 ? url.split('#')[0]: url;
      // If it's a title we remove the anchor so it does not jump.
      window.location.href = url;
    },
    transformData: function (hits) {
      return hits.map(function (hit) {
        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
        return hit;
      });
    },
    debug: false // Set debug to true if you want to inspect the dropdown
  });
</script> 
<script>
  Holder.addTheme('gray', {
    bg: '#777',
    fg: 'rgba(255,255,255,.75)',
    font: 'Helvetica',
    fontweight: 'normal'
  });
</script>
</body>
</html>
